<script setup name="visualPannel3">
import productionBoard1 from "@/views/visual/modules/productionBoard1.vue";
import productionBoard2 from "@/views/visual/modules/productionBoard2.vue";
import productionBoard20 from "@/views/visual/modules/productionBoard20.vue";
import productionBoard5 from "@/views/visual/modules/productionBoard5.vue";
import productionBoard6 from "@/views/visual/modules/productionBoard6.vue";
import productionBoard12 from "@/views/visual/modules/productionBoard12.vue";
import productionBoard7 from "@/views/visual/modules/productionBoard7.vue";

import moment from "moment";

const updateTime = ref("");
const timer = ref();
const key = ref(0);

const time = ref(300);

// 自动更新时间五分钟
const updateData = () => {
  timer.value = setInterval(() => {
    if (time.value > 0) {
      time.value--;
      const duration = moment.duration(time.value * 1000); // 转换为毫秒

      const minutes = duration.asMinutes(); // 总分钟数（包含小数部分）
      const wholeMinutes = Math.floor(minutes); // 取整得到分钟数
      const remainingSeconds = Math.round((minutes - wholeMinutes) * 60); // 计算剩余的秒数
      updateTime.value = `${wholeMinutes}分${remainingSeconds}秒`;
    } else {
      time.value = 300;
      key.value++;
    }
  }, 1000);
};

onMounted(updateData);
onUnmounted(() => {
  timer.value >= 0 && clearInterval(timer.value);
});
</script>

<template>
  <div class="ps_board">
    <div>
      <ps-header :showDecoration5="false" :updateTime="updateTime" />
    </div>

    <div class="productionPannel1-content">
      <div class="left ps_h_100">
        <ps-borderbox4>
          <div class="left-top">
            <productionBoard1 :key="key"></productionBoard1>
          </div>
          <div class="left-bottom">
            <productionBoard2 :key="key"></productionBoard2>
          </div>
        </ps-borderbox4>
      </div>
      <div class="center ps_h_100">
        <div class="center-top">
          <ps-chart-grid></ps-chart-grid>
        </div>
        <div class="center-center">
          <productionBoard20 :key="key"></productionBoard20>
        </div>
        <div class="center-bottom">
          <productionBoard5 :key="key"></productionBoard5>
        </div>
      </div>
      <div class="right ps_h_100">
        <div class="right-top">
          <ps-borderbox2>
            <productionBoard6 :key="key"></productionBoard6>
          </ps-borderbox2>
        </div>

        <div class="right-bottom">
          <div class="ps_h_50">
            <productionBoard12 :key="key"></productionBoard12>
          </div>

          <div class="ps_h_50">
            <productionBoard7 :key="key"></productionBoard7>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.productionPannel1 {
  &-content {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    padding: 4px;
    justify-content: space-between;
    .left,
    .right {
      width: 24%;
    }

    .left-top,
    .right-top {
      height: 30%;
      overflow: hidden;
    }

    .right-top {
      height: 25%;
    }

    .center-bottom,
    .center-top {
      height: 25%;
    }

    .center-center {
      height: 40%;
    }

    .center-bottom {
      overflow: hidden;
    }

    .left-bottom {
      height: 65%;
    }

    .right-bottom {
      height: 70%;
    }

    .center {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
:deep(.left .content) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
